<template>
  <div id="app">
    <!-- 使用 keep-alive 组件包裹 让Home不随意销毁掉 缓存到内存中  -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    
   
  </div>
</template>

<script>
import { mapState } from "vuex"; 
export default {
  name: "App",
  components: { 
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["isAppending"]),
  },
  watch: {
    isAppending(val) {
      // 如果状态是true 展示加载状态 否则 清空状态
      val
        ? this.$toast.loading({
            message: "加载中...",
            duration: 0,
            forbidClick: true,
          })
        : this.$toast.clear();
    },
  },

  mounted() {},
};
</script>
 

<style lang="less" scoped>
// 引入公共样式
@import url("./assets/css/common.css");
#app {
  height: calc(100vh - 1.3333rem); 
}
</style>
